<script lang="ts" setup>
import { useLifeStore, useSubjectStore } from '@/stores'
import { ref } from 'vue'
const lifeStore = useLifeStore()
const subjectStore = useSubjectStore()
const id = ref('')
subjectStore.getList()
if (subjectStore.list.length > 0) {
  lifeStore.getLife(subjectStore.list[0].id)
  id.value = subjectStore.list[0].id
}
const setID = () => {
  lifeStore.getLife(id.value)
}
const setLife = (data) => {
  lifeStore.setLife(data).then((code) => {
    if (code === true) {
      ElNotification({
        title: '皮肤病生活质量结果',
        message: '您的总分为:' + getScore(data),
        duration: 0
      })
    } else {
      ElMessage.error('失败')
    }
  })
}
const getScore = (data) => {
  let score =
    data.itching +
    data.awkward +
    data.activity +
    data.wear +
    data.socialize +
    data.sports +
    data.work +
    data.friend +
    data.sex +
    data.treatment
  score = 30 - score
  if (score > 24) return score + ',  生活质量优秀'
  else if (score > 18) return score + ',  生活质量良好'
  else return score + ',  生活质量较差'
}
</script>
<template>
  <el-card style="height: 100%">
    <div style="display: flex; height: 100%">
      <el-scrollbar max-height="700px">
        <el-tabs
          v-model="id"
          @tab-change="setID()"
          tab-position="left"
          style="width: 230px"
        >
          <el-tab-pane
            v-for="item in subjectStore.list"
            :label="item.id"
            :key="item.id"
            :name="item.id"
          />
        </el-tabs>
      </el-scrollbar>
      <el-scrollbar max-height="700px">
        <div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <span>评分：</span>
            <el-button @click="setLife(lifeStore.life)">统计得分</el-button>
          </div>
          <el-row style="border-top: 2px solid gray">
            <el-col
              :span="3"
              style="
                display: flex;
                align-items: center;
                border-left: 2px solid gray;
              "
            >
              <span>心理</span>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col>
                  <div>
                    1.上周内，你的皮肤的瘙痒或疼痛（包括酸痛、刺痛等等）的症状重吗？
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.itching">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
              <el-row style="border-top: 2px solid gray">
                <el-col>
                  <div>
                    2.上周内，你的皮肤病变有多少次让你觉察到或者让你感到尴尬？
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.awkward">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="3"
              style="
                display: flex;
                align-items: center;
                border-left: 2px solid gray;
              "
            >
              <span>日常活动</span>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col>
                  <div>
                    3.上周内，你的皮肤病变在多大程度上影响了购物、家务或者园艺活动？
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.activity">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
              <el-row style="border-top: 2px solid gray">
                <el-col>
                  <div>4.上周内，你的皮肤病变在多大程度上影响了你的穿着？</div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.wear">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="3"
              style="
                display: flex;
                align-items: center;
                border-left: 2px solid gray;
              "
            >
              <span>休闲娱乐</span>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col>
                  <div>
                    5.上周内，你的皮肤病变在多大程度上影响了你的社交或休闲活动？
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.socialize">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
              <el-row style="border-top: 2px solid gray">
                <el-col>
                  <div>
                    6.上周内，你的皮肤病变在多大程度上让体育运动变得困难？
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.sports">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="3"
              style="
                display: flex;
                align-items: center;
                border-left: 2px solid gray;
              "
            >
              <span>工作和学习</span>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col>
                  <div>7.上周内，你的皮肤病变使你妨碍工作或学习？</div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.isWork">
                      <el-radio :value="1">是</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
              <el-row style="border-top: 2px solid gray">
                <el-col>
                  <div>
                    如果“是”，上周的工作或学习中，你的皮肤病变对你造成了多大的困扰？如果上题选“否”，这题请选“无”
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.work">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="3"
              style="
                display: flex;
                align-items: center;
                border-left: 2px solid gray;
              "
            >
              <span>人际关系</span>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col>
                  <div>
                    8.上周内，你的皮肤病变在多大程度上给你的同伴、亲密朋友或者家人带来麻烦？
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.friend">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
              <el-row style="border-top: 2px solid gray">
                <el-col>
                  <div>
                    9.上周内，你的皮肤病变在多大程度上造成性生活的困难？
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.sex">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="3"
              style="
                display: flex;
                align-items: center;
                border-left: 2px solid gray;
              "
            >
              <span>治疗</span>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col>
                  <div>
                    10.上周内，治疗过程中有多大的困难？例如使家中变得不洁净或者耽误时间。
                  </div>
                  <div>
                    <el-radio-group v-model="lifeStore.life.treatment">
                      <el-radio :value="3">非常严重</el-radio>
                      <el-radio :value="2">严重</el-radio>
                      <el-radio :value="1">较轻</el-radio>
                      <el-radio :value="0">无</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </div>
  </el-card>
</template>
<style lang="scss" scoped>
.el-row {
  border-bottom: 2px solid gray;
}
.el-row .el-row {
  border-bottom: 0px;
}
.el-col {
  border-right: 2px solid gray;
}
.el-col .el-col {
  border-right: 0;
  padding: 5px 5px;
}
.el-col .el-row {
  flex-direction: column;
}
span {
  padding: 5px 5px;
}
</style>
